<template>
  <section class="my-balance-main base-main">
    <!--头部-->
    <div class="head" :class="isPartner ? 'h182' : 'h105'">
      <p class="text-c fs13">我的余额(元) <i :class="isEncryption ? 'iconyanjing' : 'iconyanjing1'" class="iconfont colorFFF encryption pr" @click="handleEncryption"></i></p>
      <p class="can-withdraw text-c colorFFF">
        {{canWithdrawn | thousands}}
      </p>
      <div class="earnings-box" v-if="isPartner">
        <div class="box-l text-c pr" @click="toJumpPage('pushMoney',1)">
          <p class="fs13">分销员提成(元)</p>
          <p class="fs17 colorFFF">{{accumulatedIncome | thousands}}</p>
        </div>
        <div class="box-r text-c" @click="toJumpPage('pushMoney',2)">
          <p class="fs13">客户提成(元)</p>
          <p class="fs17 colorFFF">{{earningsINncome | thousands}}</p>
        </div>
      </div>
    </div>
    <!--头部-->

    <!--列表-->
    <div class="detail-list bgcFFF">
      <pull-up-reload
        :on-infinite-load="onInfiniteLoad"
        :parent-pull-up-state="infiniteLoadData.pullUpState"
        style="padding-bottom: 0px;">
        <ul>
          <li :class="index < data.length-1 ? 'line-bottom' : ''" v-for="(item,index) in data" :key="index">
            <div class="left">
              <p class="color45454D fs15">{{item.content}}</p>
              <p class="time color999AA3 fs12">{{item.time}}</p>
            </div>
            <div class="right text-r">
              <span v-if="item.amount > 0" class="color7E82F6 fs14">+{{item.amount}}</span>
              <span v-else class="colorF87676 fs14">{{item.amount}}</span>
            </div>
          </li>
        </ul>
      </pull-up-reload>
    </div>
    <!--列表-->
  </section>
</template>

<script type="text/ecmascript-6">
  import PullUpReload from '../../components/PullUpReload.vue'

  export default {
    components:{
      PullUpReload
    },
    data() {
      return {
        data:[
          {
            content:'购物提成（张三丰）',
            time:'2019-02-24 10:30:24',
            amount:'5',
          },
          {
            content:'购物提成（张三丰）',
            time:'2019-02-24 10:30:24',
            amount:'8',
          },
          {
            content:'购物提成（张三丰）',
            time:'2019-02-24 10:30:24',
            amount:'10',
          },
          {
            content:'购物提成（张三丰）',
            time:'2019-02-24 10:30:24',
            amount:'-10',
          },
        ],
        canWithdrawn:'28200.00',//可提现余额
        accumulatedIncome:'28200.00',//累计收益
        earningsINncome:'28200.00',//待结算收益
        save:{
          canWithdrawn:'28200.00',//可提现余额
          accumulatedIncome:'28200.00',//累计收益
          earningsINncome:'28200.00',//待结算收益
        },//保存金额
        isEncryption:false,//是否点击加密
        isPartner:false,//是否是合伙人

        page:0,
        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 6, // 初始显示多少条
          everyLoadingNum: 6, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    filters:{
      thousands(num){
        num = num.toString();   //将输入的数字转换为字符串
        if(/^-?\d+\.?\d+$/.test(num)){  //判断输入内容是否为整数或小数
          if(/^-?\d+$/.test(num)){    //判断输入内容是否为整数
            num =num + ",00";   //将整数转为精度为2的小数，并将小数点换成逗号
          }else{
            num = num.replace(/\./,',');    //将小数的小数点换成逗号
          }
          while(/\d{4}/.test(num)){ //
            /***
             *判断是否有4个相连的数字，如果有则需要继续拆分，否则结束循环；
             *将4个相连以上的数字分成两组，第一组$1是前面所有的数字（负数则有符号），
             *第二组第一个逗号及其前面3个相连的数字；
             * 将第二组内容替换为“,3个相连的数字，”
             ***/
            num = num.replace(/(\d+)(\d{3}\,)/,'$1,$2');
          }
          num = num.replace(/\,(\d*)$/,'.$1');   //将最后一个逗号换成小数点
        }
        return num
      },
    },
    methods: {
      //金额加密
      handleEncryption(){
        this.isEncryption = !this.isEncryption
        if(!this.isEncryption){
          this.canWithdrawn = this.save.canWithdrawn
          this.accumulatedIncome = this.save.accumulatedIncome
          this.earningsINncome = this.save.earningsINncome
        }else{
          this.canWithdrawn = '****'
          this.accumulatedIncome = '****'
          this.earningsINncome = '****'
        }
      },
      //跳转
      toJumpPage(name,type){
        this.$router.push({
          path:'/index/web/' + name,
          query:{
            type: type
          }
        })
      },
      //点击提现
      toWithdraw(){
        let time = new Date();
        if(time.getDate() == 15){
          this.$router.push({
            path: '/index/web/WithdrawCordInfo'
          })
        }else{
          this.$toast('每月15号可申请上个月的佣金');
          return false;
        }
      },

      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
//          this.getPullUpMoreData()
        }
        done()
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/myBalance.scss';

  .h105{
    height: 105px !important;
  }

  .h182{
    height: 182px !important;
  }

  .head{

    .earnings-box{
      margin-top: 22px;
    }
  }
</style>
